<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="oninput">
    <input type="file" id="file">
    <select name="s" id="s">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    </select>
    <button id="b">button</button>
    <script>
        let inputs = document.querySelector('#oninput');
        inputs.addEventListener('change',function(e){
             console.log(e.target.value);
             console.log(e.target.value.length);
        })
        let files = document.querySelector('#file');
        let fileData;
        files.addEventListener('change',function(e){
            let fileType = e.target.files[0].name;
            fileData = e.target.files[0];
            let types = fileType.split('.')[1];
            if(types == 'jpg' || types == 'png' || types == 'gif' || types == 'jpeg'){
                alert('yes');
            }else{
                alert('格式错误');
            }
        })
        let selects = document.querySelector('#s');
        selects.addEventListener('change',function(e){
            console.log(e.target.value);
            if(e.target.value == 1){
                alert('hello world!');
            }
        })
        let b = document.querySelector('#b');
        b.onclick = function(){
            this.setAttribute('disabled','disabled');
            this.setAttribute('data-id','45');
            this.removeAttribute('disabled');
            let xhr = new XMLHttpRequest();
            xhr.open('GET','http://127.0.0.1:8080/index.php');
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.onload = function(){
                console.log(xhr.responseText);
                if(xhr.status == 200){
                    alert(xhr.responseText);
                    this.setAttribute('disabled','false');
                }else{
                    alert('请求失败');
                }
            }
            let fromData = new FormData();
            fromData.append('file',fileData);
            xhr.data = fromData;
            xhr.progress = function(e){
                console.log(e.loaded);
            }
            xhr.send();
        }
    </script>
</body>
</html>